<script setup lang="ts">
import { ref } from "vue";
import {
  getSysRoleMenus,
  rebindSysRoleMenus,
  SysRole
} from "@/views/domain/admin/api/sysRole";
import { SysMenu } from "@/views/domain/admin/api/sysMenu";
import SysMenuTree from "@/views/domain/admin/views/sysMenu/components/SysMenuTree.vue";

const roleInfo = ref<SysRole | null>();
const roleMenus = ref<SysMenu[]>([]);
const checkedMenuIds = ref<number[]>([]);
const visible = ref(false);

const showEdit = async (role: SysRole) => {
  roleInfo.value = role;
  roleMenus.value = [];

  visible.value = true;
  const res = await getSysRoleMenus(role.roleId);
  roleMenus.value = res.data;
};

const save = () => {
  visible.value = false;
  rebindSysRoleMenus(roleInfo.value.roleId, checkedMenuIds.value);
};

defineExpose({
  showEdit
});
</script>

<template>
  <el-dialog v-model="visible" title="修改角色菜单">
    <SysMenuTree
      v-model:checked-keys="checkedMenuIds"
      checkable
      :menus="roleMenus"
    />

    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped></style>
